<template>
  <div class="Frame">
    <el-container>
      <el-header>
        <div class="left">
          <i class="el-icon-back" @click="back"></i>
          <i class="el-icon-refresh-right" @click="reload"></i>
          <svg
            t="1647311394571"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2439"
            width="30"
            height="30"
            @click="musicPage"
          >
            <path
              d="M511.999488 133.281539c14.272052 0 28.482705 0.036839 42.290176 2.1295 9.461489 1.431605 41.910529-16.047488 66.586534-36.20048 19.167548-15.673981 32.118512-35.380812 35.93749-34.927487 13.769608 1.6158-2.644223 92.291986 30.819936 107.996666 140.592039 65.974597 237.987253 208.769814 237.987253 374.22717 0 228.170676-185.219445 413.218206-413.622412 413.218206-228.396827 0-413.622412-185.04753-413.622412-413.218206 0.001023-228.177839 185.226608-413.225369 413.623435-413.225369z m129.881093-29.020964c-29.388331 32.05609-55.166437 48.924269-93.76043 60.350507-57.039087 16.903995-185.323822 19.431561-178.799223 102.383831 3.641947 46.145993 173.621293 251.80598 226.16909 320.602856-76.146261-2.215458-148.559501 0.930185-206.774367 53.710272-67.694775 61.372789-88.851631 175.695534-1.523703 236.873896 125.811404 88.10564 342.084099-48.668443 307.22415-191.401238-8.934486-36.635385-34.443463-62.927191-53.685713-94.089935-45.558615-73.656557-91.116207-147.31823-136.674823-220.961484-13.34289-24.413016-16.414855-35.796274-18.556634-63.557548 118.216425-29.531594 194.436364-61.20292 156.381653-203.911157z m0 0"
              p-id="2440"
              fill="#ffffff"
            ></path>
          </svg>
        </div>

        <div class="input_out">
          <el-input
            popper-class="my-autocomplete"
            :trigger-on-focus="false"
            placeholder="请输入内容"
            v-model="SearchValue"
            @keyup.enter.native="search"
            size="mini"
            clearable
          >
            <i
              class="el-icon-search el-input__icon"
              slot="suffix"
              @click="search"
            >
            </i>
          </el-input>
          <div class="History_and_recommendations">
            <!-- <i class="el-icon-close"></i> -->
            <h3>热搜</h3>
            <div class="recommendations">
              <span
                v-for="(hot, index) in hots"
                :key="index"
                @click.stop="text1(hot)"
              >
                {{ hot.first }}
              </span>
            </div>
            <h3 v-if="Historical_Search">历史搜索</h3>
            <div class="History" v-if="Historical_Search">
              <span
                v-for="(h, index) in Historical_Search"
                :key="index"
                @click.stop="text1(h)"
              >
                {{ h }}
              </span>
            </div>
            <div class="search_result" v-if="search_result">
              <div class="songs item">
                <h3>
                  <svg
                    t="1648891605756"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4504"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M232.448 263.509333c31.914667 17.749333 62.976 17.066667 89.258667-1.792l-19.029334-29.525333c-24.832 18.005333-52.906667 3.242667-72.021333-12.373333a22.784 22.784 0 0 0-28.245333-0.768A26.197333 26.197333 0 0 0 192.938667 247.466667l65.706666 241.664c-35.157333-11.690667-70.4 0-80.213333 28.416-10.24 29.269333 11.264 64.768 47.957333 79.36s74.752 2.56 85.333334-26.709334a54.442667 54.442667 0 0 0-9.386667-49.664zM773.376 233.728v-19.2l-330.752 136.533333 0.597333 1.536h-2.986666v281.6a77.824 77.824 0 0 0-13.568-5.717333c-34.816-11.178667-68.266667 4.352-75.264 34.133333s15.957333 63.914667 50.773333 75.008 68.266667-4.266667 75.264-34.133333a50.432 50.432 0 0 0 0-20.224h2.389333V421.376l256-107.008L733.866667 527.274667a80.213333 80.213333 0 0 0-13.141334-6.144c-34.816-12.544-68.266667 4.778667-75.264 38.656s15.957333 71.338667 51.2 83.797333 68.266667-4.864 75.264-38.656a62.890667 62.890667 0 0 0 0-22.613333h2.389334V233.728z"
                      fill="#231815"
                      p-id="4505"
                    ></path>
                  </svg>
                  单曲
                </h3>
                <p
                  v-for="(song, index) in search_result.songs"
                  :key="index"
                  @click="toNewSong(song)"
                >
                  {{ song.name }}
                  <span class="alias" v-if="song.alias.length !== 0"
                    >({{ song.alias[0] }})</span
                  >
                  - <span class="artistsName">{{ song.artists[0].name }}</span>
                </p>
              </div>
              <div class="artists item">
                <h3>
                  <svg
                    t="1648891826028"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="11794"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M768 733.866667L674.133333 640H392.533333L298.666667 733.866667V810.666667h469.333333v-76.8z m42.666667-17.066667V853.333333H256v-136.533333L375.466667 597.333333h311.466666l123.733334 119.466667z m-85.333334-354.133333c0 106.666667-85.333333 192-192 192S341.333333 469.333333 341.333333 362.666667 426.666667 170.666667 533.333333 170.666667 725.333333 256 725.333333 362.666667z m-42.666666 0C682.666667 281.6 614.4 213.333333 533.333333 213.333333S384 281.6 384 362.666667s68.266667 149.333333 149.333333 149.333333S682.666667 443.733333 682.666667 362.666667z"
                      fill="#444444"
                      p-id="11795"
                    ></path>
                  </svg>
                  歌手
                </h3>
                <p
                  v-for="(artist, index) in search_result.artists"
                  :key="index"
                  @click="toSinger(artist)"
                >
                  {{ artist.name }}
                </p>
              </div>
              <!-- <div class="albums item">
                <h3>
                  <svg
                    t="1648891849126"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="12274"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M558.08 856.064a377.514667 377.514667 0 0 1-46.08 2.901333 347.136 347.136 0 0 1-321.194667-216.064h199.68a178.005333 178.005333 0 0 0 243.029334 0h61.952a17.066667 17.066667 0 0 0 0-34.133333h-34.133334A177.493333 177.493333 0 0 0 690.858667 512a175.274667 175.274667 0 0 0-2.56-28.501333h89.770666a17.066667 17.066667 0 0 0 0-34.133334H679.253333a182.272 182.272 0 0 0-17.066666-34.133333h182.784a341.333333 341.333333 0 0 1 13.994666 96.768 358.4 358.4 0 0 1-4.096 54.101333 17.066667 17.066667 0 0 0 14.165334 19.626667 17.066667 17.066667 0 0 0 19.456-14.336A380.074667 380.074667 0 1 0 563.2 889.856a17.066667 17.066667 0 0 0-4.437333-34.133333zM165.034667 512a341.333333 341.333333 0 0 1 13.994666-96.768H361.813333a182.272 182.272 0 0 0-17.066666 34.133333h-52.053334a17.066667 17.066667 0 0 0 0 34.133334h43.008a175.274667 175.274667 0 0 0-2.56 28.501333 177.493333 177.493333 0 0 0 28.672 96.768H179.029333A341.333333 341.333333 0 0 1 165.034667 512z m202.24 0A144.725333 144.725333 0 1 1 512 656.725333 145.066667 145.066667 0 0 1 367.274667 512zM512 165.034667a347.136 347.136 0 0 1 321.194667 216.064h-199.68a178.005333 178.005333 0 0 0-243.029334 0h-199.68A347.136 347.136 0 0 1 512 165.034667z"
                      fill="#3D3D63"
                      p-id="12275"
                    ></path>
                    <path
                      d="M230.058667 449.365333H211.626667a17.066667 17.066667 0 1 0 0 34.133334h18.432a17.066667 17.066667 0 1 0 0-34.133334zM578.730667 487.424l-78.848-45.568a28.501333 28.501333 0 0 0-42.666667 24.576v91.136a28.330667 28.330667 0 0 0 42.666667 24.576l78.848-45.568a28.16 28.16 0 0 0 0-49.152z m-87.381334 60.245333v-71.338666L553.130667 512zM823.978667 623.957333a35.157333 35.157333 0 0 1-35.157334-35.157333 17.066667 17.066667 0 0 0-34.133333 0v151.210667a83.968 83.968 0 0 0-51.2-17.066667 85.333333 85.333333 0 1 0 85.333333 85.333333V648.533333a68.266667 68.266667 0 0 0 35.157334 9.898667 34.986667 34.986667 0 0 1 34.133333 34.133333 17.066667 17.066667 0 0 0 34.133333 0 69.290667 69.290667 0 0 0-68.266666-68.608z m-120.490667 235.008a51.2 51.2 0 1 1 51.2-51.2 51.2 51.2 0 0 1-51.2 51.2z"
                      fill="#3D3D63"
                      p-id="12276"
                    ></path>
                  </svg>
                  专辑
                </h3>
                <p v-for="(album, index) in search_result.albums" :key="index">
                  {{ album.name }} -
                  <span class="artistsName">{{ album.artist.name }}</span>
                </p>
              </div> -->
              <div class="playlists item">
                <h3>
                  <svg
                    t="1648891897008"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="12890"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M770.048 941.056H248.832c-55.296 0-100.352-45.056-100.352-100.352V227.84c0-55.296 45.056-100.352 100.352-100.352h521.216c55.296 0 100.352 45.056 100.352 100.352v613.376c0 54.784-45.056 99.84-100.352 99.84zM248.832 167.424c-33.28 0-60.416 27.136-60.416 60.416v613.376c0 33.28 27.136 60.416 60.416 60.416h521.216c33.28 0 60.416-27.136 60.416-60.416V227.84c0-33.28-27.136-60.416-60.416-60.416H248.832z"
                      fill="#666666"
                      p-id="12891"
                    ></path>
                    <path
                      d="M614.4 351.232H247.296c-11.264 0-19.968-9.216-19.968-19.968s9.216-19.968 19.968-19.968H614.4c11.264 0 19.968 9.216 19.968 19.968s-8.704 19.968-19.968 19.968zM614.4 547.84H247.296c-11.264 0-19.968-9.216-19.968-19.968s9.216-19.968 19.968-19.968H614.4c11.264 0 19.968 9.216 19.968 19.968s-8.704 19.968-19.968 19.968zM417.792 757.76H247.296c-11.264 0-19.968-9.216-19.968-19.968s9.216-19.968 19.968-19.968h170.496c11.264 0 19.968 9.216 19.968 19.968s-9.216 19.968-19.968 19.968zM657.408 719.872h-1.024c-11.264-0.512-19.456-10.24-18.944-20.992l23.552-432.128c0.512-10.752 9.216-18.944 19.968-18.944 11.264 0 19.456 8.192 20.48 18.432 6.656 87.552 66.56 122.368 67.072 122.88 9.728 5.632 12.8 17.92 7.168 27.136-5.632 9.728-17.92 12.8-27.136 7.168-2.048-1.024-29.184-16.896-52.736-52.224l-17.92 329.216c-1.024 11.264-9.728 19.456-20.48 19.456z"
                      fill="#666666"
                      p-id="12892"
                    ></path>
                    <path
                      d="M559.104 806.4h-6.656c-31.744-1.536-60.928-15.872-82.432-39.424-21.504-23.552-32.256-54.272-30.208-86.528 1.536-31.744 15.872-60.928 39.424-82.432 23.552-21.504 54.272-32.256 86.528-30.208 66.048 3.584 116.224 59.904 112.64 125.952-3.584 63.488-56.32 112.64-119.296 112.64z m0-198.656c-19.456 0-38.4 7.168-52.736 20.48-15.872 14.336-25.088 33.792-26.112 54.784-1.024 20.992 6.144 41.472 19.968 57.344 14.336 15.872 33.792 25.088 54.784 26.112 44.032 2.048 81.408-31.232 83.456-74.752 2.56-43.52-31.232-81.408-74.752-83.456-2.048-0.512-3.072-0.512-4.608-0.512z"
                      fill="#666666"
                      p-id="12893"
                    ></path>
                  </svg>
                  歌单
                </h3>
                <p
                  v-for="(playlist, index) in search_result.playlists"
                  :key="index"
                  @click="toSongList(playlist)"
                >
                  {{ playlist.name }}
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="right">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-user" @click="person"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item command="1">个人中心</el-dropdown-item> -->
              <!-- <el-dropdown-item command="2">设置</el-dropdown-item> -->
              <!-- <el-dropdown-item command="666">测试</el-dropdown-item> -->
              <!-- <el-dropdown-item disabled>lv.</el-dropdown-item> -->
              <el-dropdown-item divided command="0">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <i class="el-icon-minus" @click="minimize"></i>
          <i class="el-icon-full-screen" @click="maximize"></i>
          <i class="el-icon-close" @click="close"></i>
        </div>
      </el-header>

      <el-container>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </el-container>

      <el-footer>
        <a-progress
          :strokeWidth="2"
          :stroke-color="{
            from: '#108ee9',
            to: '#87d068',
          }"
          :percent="My_percent"
          status="active"
          :showInfo="false"
          @click="clickTOcurrentTime"
        ></a-progress>
        <div class="footer_main">
          <div class="head_portrait" @click="updata_lyricPageShow" v-if="song">
            <img
              :src="songIMGurl"
              :alt="song.name"
            />
            <p class="name">{{ song.name }}</p>
            <div class="toLyricPage">
              <svg
                t="1648293261832"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3811"
                width="200"
                height="200"
              >
                <path
                  d="M204.373 872.533a34.133 34.133 0 0 1-48.213-48.213l331.947-331.947a34.133 34.133 0 0 1 48.213 0L868.267 824.32a34.133 34.133 0 0 1-48.214 48.213L512 564.907z m0-341.333a34.133 34.133 0 0 1-48.213-48.213L488.107 151.04a34.133 34.133 0 0 1 48.213 0l331.947 331.947a34.133 34.133 0 0 1-48.214 48.213L512 223.573z"
                  p-id="3812"
                  fill="#dbdbdb"
                ></path>
              </svg>
            </div>
          </div>
          <div
            class="lyric_box"
            v-show="lyric_OR_control"
            @click="lyric_TO_control"
          >
            <songLyric :discHeight="50"></songLyric>
          </div>
          <div
            class="middle_control"
            v-show="!lyric_OR_control"
            @click="lyric_TO_control"
          >
            <div class="like_this play_item">
              <svg
                t="1648282730083"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6187"
                width="200"
                height="200"
                @click.stop="like()"
              >
                <path
                  d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z"
                  fill=""
                  p-id="6188"
                  class="fingerCursor"
                ></path>
                <path
                  d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z"
                  :fill="return_like_color()"
                  p-id="6189"
                  class="fingerCursor"
                ></path>
                <!-- fill="#FF5F5F" -->
                <path
                  d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z"
                  fill="#FFFFFF"
                  p-id="6190"
                ></path>
              </svg>
            </div>
            <div class="before_one play_item">
              <svg
                t="1648283012944"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8010"
                width="200"
                height="200"
                @click.stop="before"
              >
                <path
                  d="M664.64 177.12a96 96 0 0 1 50.56 14.4 85.92 85.92 0 0 1 41.92 73.12v459.52a85.92 85.92 0 0 1-41.92 73.12 96.8 96.8 0 0 1-94.88 3.84l-4-2.4L304 573.76a84.96 84.96 0 0 1 0-151.52L618.08 188.8l2.24-1.12a98.88 98.88 0 0 1 44.32-10.56z m0 576a38.4 38.4 0 0 0 20.16-5.76 28.64 28.64 0 0 0 14.4-23.84V264.64a28.64 28.64 0 0 0-14.4-24.64 39.2 39.2 0 0 0-36.48-2.24L334.88 471.68l-2.24 1.12a27.2 27.2 0 0 0 0 50.24l4 2.4 311.52 224a40.64 40.64 0 0 0 16.48 4.32z"
                  p-id="8011"
                  fill="#ffffff"
                ></path>
                <path
                  d="M257.92 811.68m-25.6 0l-0.16 0q-25.6 0-25.6-25.6l0-583.36q0-25.6 25.6-25.6l0.16 0q25.6 0 25.6 25.6l0 583.36q0 25.6-25.6 25.6Z"
                  p-id="8012"
                  fill="#ffffff"
                ></path>
              </svg>
            </div>
            <div class="play_pause">
              <!-- 播放 -->
              <svg
                v-show="play_state"
                t="1648137595142"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5184"
                width="200"
                height="200"
                @click.stop="pause"
              >
                <path
                  d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m106.666667 682.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V320a21.333333 21.333333 0 0 1 42.666667 0v384a21.333333 21.333333 0 0 1-21.333333 21.333333z m-213.333334 0a21.333333 21.333333 0 0 1-21.333333-21.333333V320a21.333333 21.333333 0 0 1 42.666667 0v384a21.333333 21.333333 0 0 1-21.333334 21.333333z"
                  fill="#ff5506"
                  p-id="5185"
                  class="fingerCursor"
                ></path>
              </svg>
              <!-- 暂停 -->
              <svg
                v-show="!play_state"
                t="1648137535637"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4226"
                width="200"
                height="200"
                @click.stop="play"
              >
                <path
                  d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
                  fill="#ff5506"
                  p-id="4227"
                  class="fingerCursor"
                ></path>
              </svg>
            </div>
            <div class="after_one play_item">
              <svg
                t="1648283042905"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="8253"
                width="200"
                height="200"
                @click.stop="after"
              >
                <path
                  d="M296.64 808.96a96 96 0 0 1-50.56-14.4 85.92 85.92 0 0 1-41.92-73.12V261.92a85.92 85.92 0 0 1 41.92-73.12 96.8 96.8 0 0 1 94.88-3.84l4 2.4 311.84 224.8a84.96 84.96 0 0 1 0 151.52l-313.6 233.6-2.24 1.12a98.88 98.88 0 0 1-44.32 10.56z m0-576a38.4 38.4 0 0 0-20.16 5.76 28.64 28.64 0 0 0-14.4 23.84v458.88a28.64 28.64 0 0 0 14.4 23.84 39.2 39.2 0 0 0 36.48 2.24l313.44-233.12 2.24-1.12a27.2 27.2 0 0 0 0-50.24l-4.64-2.56-311.52-224a40.64 40.64 0 0 0-15.68-4.16z"
                  p-id="8254"
                  class="fingerCursor"
                  fill="#ffffff"
                ></path>
                <path
                  d="M703.36 174.4m25.6 0l0.16 0q25.6 0 25.6 25.6l0 583.36q0 25.6-25.6 25.6l-0.16 0q-25.6 0-25.6-25.6l0-583.36q0-25.6 25.6-25.6Z"
                  p-id="8255"
                  class="fingerCursor"
                  fill="#ffffff"
                ></path>
              </svg>
            </div>
            <div class="play_mode play_item">
              <!-- 顺序播放 -->
              <svg
                t="1648283105848"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9130"
                width="200"
                height="200"
                @click.stop="mode(play_mode)"
                v-if="play_mode === '0'"
              >
                <path
                  d="M956.915826 484.47273l-105.340577 106.496578c-8.706131 8.344881-22.758767 8.344881-31.392648 0l-104.690327-106.496578c-12.354759-14.594511-4.082128-19.760389 4.551753-28.213646h95.911946c-26.515769-143.59698-152.194736-252.47781-303.522473-252.47781-117.081211 0-218.84541 65.025048-271.262823 160.936993l-52.309039-20.91639c60.94292-116.539335 182.828759-196.158894 323.571862-196.158894 182.467509 0 333.144994 133.879348 360.202639 308.616101h79.800184c8.597756 8.453256 13.113385 19.83264 4.479503 28.213646z m-751.1838-22.614267l105.340577 106.388203c8.706131 8.453256 4.190503 19.83264-4.551753 28.285896H215.341283c36.666902 129.43597 155.698864 224.372539 297.056092 224.372539 107.544204 0 202.191773-54.98229 257.463064-138.358851l52.850914 21.097015c-64.302547 103.895576-179.071756 173.400127-310.313978 173.400127-172.605376 0-316.527482-119.826713-354.531009-280.51083H74.164679c-8.633881-8.453256-16.906512-13.691385-4.443378-28.285896l104.618077-106.388203c8.633881-8.453256 22.686517-8.453256 31.392648 0z"
                  fill="#ffffff"
                  p-id="9131"
                  class="fingerCursor"
                ></path>
              </svg>
              <!-- 单曲循环 -->
              <svg
                t="1648831990577"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1073"
                width="200"
                height="200"
                @click.stop="mode(play_mode)"
                v-if="play_mode === '1'"
              >
                <path
                  d="M773.597867 203.776l-0.273067 0.443733a33.621333 33.621333 0 0 0-20.343467-6.485333c-18.978133 0.785067-33.723733 16.725333-32.9728 35.771733a33.826133 33.826133 0 0 0 15.633067 26.794667l-0.1024 0.170667a375.227733 375.227733 0 0 1 166.2976 311.876266c0 207.018667-168.448 375.466667-375.466667 375.466667-27.818667 0-27.818667 0-54.340266-2.901333-90.453333-9.898667-152.610133-58.9824-155.5456-61.201067a375.330133 375.330133 0 0 1-165.5808-311.364267c0-201.4208 159.5392-365.841067 358.843733-374.647466l-41.984 40.823466 0.8192 0.853334a33.860267 33.860267 0 0 0-15.2576 29.218133c0.750933 18.978133 16.725333 33.757867 35.669333 33.041067a33.792 33.792 0 0 0 26.0096-14.472534l0.3072 0.341334 128.648534-124.996267L515.6864 34.0992l-0.4096 0.4096a33.6896 33.6896 0 0 0-26.3168-11.400533c-18.944 0.750933-33.6896 16.725333-32.9728 35.703466a33.8944 33.8944 0 0 0 13.038933 25.156267l45.226667 45.2608C275.182933 135.714133 82.602667 331.741867 82.602667 572.347733c0 147.626667 73.1136 285.149867 193.194666 366.114134 3.072 2.56 77.550933 62.190933 188.757334 74.308266 29.422933 3.208533 31.1296 3.310933 61.781333 3.310934 244.667733 0 443.733333-199.0656 443.733333-443.733334A443.392 443.392 0 0 0 773.597867 203.776"
                  p-id="1074"
                  fill="#ffffff"
                ></path>
                <path
                  d="M542.071467 400.827733a33.28 33.28 0 0 0-17.134934 6.075734l-0.170666-0.3072-106.8032 69.700266 0.170666 0.273067a33.9968 33.9968 0 0 0-15.837866 29.696c0.750933 18.944 16.725333 33.723733 35.669333 32.9728a33.109333 33.109333 0 0 0 17.1008-6.0416l0.2048 0.273067 53.998933-35.259734v249.856h0.034134c0 0.477867-0.238933 0.887467-0.2048 1.365334a34.2016 34.2016 0 1 0 68.4032-1.365334h0.034133v-0.170666c0-0.4096 0.2048-0.750933 0.2048-1.160534 0-0.273067-0.170667-0.477867-0.2048-0.785066V435.2c0-0.477867 0.2048-0.887467 0.2048-1.3312a34.4064 34.4064 0 0 0-35.669333-33.041067"
                  p-id="1075"
                  fill="#ffffff"
                ></path>
              </svg>
              <!-- 随机 -->
              <svg
                t="1648832140922"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1870"
                width="200"
                height="200"
                @click.stop="mode(play_mode)"
                v-if="play_mode === '2'"
              >
                <path
                  d="M622.917818 601.367273l4.282182 2.56 3.677091 3.072 181.294545 181.341091v-100.491637c0-11.031273 6.190545-20.852364 15.639273-25.832727l4.189091-1.861818 4.654545-1.163637 4.840728-0.465454a29.323636 29.323636 0 0 1 27.694545 19.874909l1.163637 4.654545 0.465454 4.794182v166.912a32.488727 32.488727 0 0 1-1.070545 8.378182 28.578909 28.578909 0 0 1-13.591273 19.968l-2.839273 1.489455a32.256 32.256 0 0 1-7.168 3.025454l-4.049454 0.930909-5.585455 0.465455h-164.119273a29.323636 29.323636 0 0 1-9.402181-57.018182l4.561454-1.163636 4.840727-0.465455h100.072728l-182.504728-182.458182a28.858182 28.858182 0 0 1-7.121454-28.951272l1.675636-4.235637 2.327273-4.049454 3.118545-3.677091a28.951273 28.951273 0 0 1 32.954182-5.632z m213.643637-466.385455c6.050909 0 11.869091 1.582545 16.756363 4.375273a30.906182 30.906182 0 0 1 8.378182 5.957818c4.235636 4.189091 6.981818 9.588364 7.959273 15.034182l0.837818 4.375273 0.279273 4.514909v166.912a29.323636 29.323636 0 0 1-58.274909 4.328727l-0.325819-4.328727v-100.538182L207.639273 840.238545a28.858182 28.858182 0 0 1-28.951273 7.168l-4.235636-1.675636-4.049455-2.327273-3.677091-3.118545a28.858182 28.858182 0 0 1-5.445818-33.186909l2.327273-4.049455 3.118545-3.677091L772.514909 193.536l-100.072727 0.046545a29.323636 29.323636 0 0 1-27.927273-20.386909l-1.070545-4.561454-0.325819-4.328727a29.323636 29.323636 0 0 1 24.948364-28.997819l4.328727-0.325818h164.165819zM199.68 178.129455l4.282182 2.56 3.677091 3.072 192.372363 192.372363a28.904727 28.904727 0 0 1-33.186909 46.359273l-4.049454-2.327273-3.677091-3.118545-192.372364-192.372364a28.904727 28.904727 0 0 1 32.954182-46.545454z"
                  fill="#ffffff"
                  p-id="1871"
                ></path>
              </svg>
            </div>
          </div>
          <div class="rigth_control">
            <svg
              slot="reference"
              t="1648294424503"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4777"
              width="200"
              height="200"
              @click.stop="change_volumeShow"
            >
              <path
                d="M605.6 929.8c-35.7 0-74.8-21-123.1-66.2-37.4-35-74.4-78.9-107-117.6-19.3-23-37.8-44.9-52.5-60.2H173.4c-25 0-45.3-21.8-45.3-48.6V400.5c0-26.8 20.3-48.5 45.3-48.5 16.6 0 30 13.4 30 30 0 11.2-6.2 21-15.3 26.2v217.5h159.2l8.7 8.3c18.2 17.3 40 43.2 65.3 73.3 31.5 37.4 67.3 79.9 102.1 112.5 44.2 41.3 69 50 82 50.1h8.8c1 0 1.9-0.1 2.7-0.2l-0.3-718.2c-0.8-0.1-1.7-0.2-2.8-0.2h-8.7c-23.5 0-54.6 18.3-92.4 54.4-36.7 35.1-73.2 80.5-105.3 120.7-25.4 31.7-47.3 59.1-66 77.3-11.9 11.6-30.9 11.3-42.4-0.6-11.6-11.9-11.3-30.9 0.6-42.4 16-15.6 37.9-42.9 61-71.8 33.3-41.6 71.1-88.7 110.7-126.5 50.1-47.8 93.8-71 133.8-71h8.7c35.2 0 62.8 22.6 62.8 51.4l0.3 735.8c-0.1 28.9-27.6 51.4-62.7 51.4l-8.6-0.2zM724.3 636.2c-10.3 0-20.3-5.3-25.9-14.8-8.4-14.3-3.7-32.7 10.6-41.1 22.1-13.1 35.9-37.5 35.9-63.7 0-26.2-13.7-50.7-35.9-63.7-14.3-8.4-19-26.8-10.5-41.1 8.4-14.3 26.8-19 41.1-10.5 40.3 23.8 65.3 68 65.3 115.4 0 47.4-25 91.6-65.3 115.4-4.9 2.7-10.1 4.1-15.3 4.1z"
                fill="#dbdbdb"
                p-id="4778"
              ></path>
              <path
                d="M751.6 745.7c-10.9 0-21.4-6-26.7-16.4-7.5-14.8-1.7-32.8 13.1-40.4 59.5-30.4 97.9-97.7 97.9-171.5S797.5 376.3 738 345.9c-14.8-7.5-20.6-25.6-13.1-40.4 7.5-14.8 25.6-20.6 40.4-13.1 38.7 19.8 71.5 51.1 94.7 90.5 23.5 40 36 86.5 36 134.4 0 47.9-12.4 94.3-36 134.4-23.2 39.4-55.9 70.8-94.6 90.5-4.5 2.5-9.2 3.5-13.8 3.5z"
                fill="#dbdbdb"
                p-id="4779"
              ></path>
            </svg>
            <svg
              t="1648294614546"
              class="icon"
              viewBox="0 0 1224 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6615"
              width="200"
              height="200"
              @click="change_drawer"
            >
              <path
                d="M657.38638 430.059755h519.241845a45.152085 45.152085 0 1 0 0-90.304171H657.38638a45.152085 45.152085 0 0 0 0 90.304171z m521.261114 203.181325H657.38638a45.152085 45.152085 0 1 0 0 90.302131h521.261114a45.152085 45.152085 0 1 0 0-90.302131z m0 293.483456H657.38638a45.152085 45.152085 0 0 0 0 90.302132h521.261114a45.152085 45.152085 0 1 0 0-90.302132z"
                fill="#dbdbdb"
                p-id="6616"
              ></path>
              <path
                d="M669.597861 160.218066a576.554418 576.554418 0 0 0-224.40405-157.127707 45.017468 45.017468 0 0 0-61.406184 41.990603v556.041498a236.805219 236.805219 0 1 0 90.304171 185.799292c0-2.482273-0.226403-4.966587-0.450766-7.44886 0-1.354338 0.450766-2.484313 0.450766-3.838652V116.193916a490.93536 490.93536 0 0 1 127.778954 103.396787 45.035825 45.035825 0 0 0 67.727109-59.374676z m-432.549922 773.441335a146.741728 146.741728 0 1 1 146.739688-146.741729 147.029321 147.029321 0 0 1-146.739688 146.743768z"
                fill="#dbdbdb"
                p-id="6617"
              ></path>
            </svg>
            <div class="volume_popover" @clik.stop v-show="volumeShow">
              <div class="block">
                <el-slider
                  v-model="volume"
                  vertical
                  height="100px"
                  @change="change_volume"
                >
                </el-slider>
              </div>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>

    <!-- 歌词页面 -->
    <transition name="slide">
      <lyricPage
        v-show="lyricPage_show"
        @updata:lyricPageShow="updata_lyricPageShow"
      ></lyricPage>
    </transition>
  </div>
</template>

<script src="./index.js">
</script>

<style lang="scss" scoped>
@import "./index.scss";

.my-autocomplete /deep/.el-input .el-input__inner {
  -webkit-app-region: no-drag;
  width: 30%;
}

// 动画
// slide
.slide-enter,
.slide-leave-to {
  opacity: 0;
  transform: translateY(100vh);
}
.slide-enter-active,
.slide-leave-active {
  transition: 0.5s;
}
.slide-enter-to,
.slide-leave {
  opacity: 1;
  transform: translateY(0);
}

// turnOver
.turnOver-enter,
.turnOver-leave-to {
  opacity: 0;
  transform: rotateX(90deg);
}
.turnOver-enter-active,
.turnOver-leave-active {
  transition: 0.5s;
}
.turnOver-enter-to,
.turnOver-leave {
  opacity: 1;
  transform: rotateX(0deg);
}

.el-dropdown-link {
  cursor: pointer;
}
</style>